<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div>
    <el-menu
      class="el-menu-demo"
      mode="horizontal"
      :ellipsis="false"
      @select="handleSelect"
      menu-trigger="click"
      :closeOnClickOutside="true"
    >
    <div class="flex-grow" />
      <el-sub-menu index="0">
        <template #title>
          <span>消息 </span>
        </template>
      </el-sub-menu>
      <el-sub-menu index="1">
        <template #title>
          <span>代办 </span>
        </template>
      </el-sub-menu>
      <el-menu-item index="2">{{ $user_name }}</el-menu-item>
      <el-sub-menu index="3">
        <template #title>
          <Avatar :avatar-data="avatarData" />
        </template>
        <el-menu-item index="3-1"> <span style="margin-left: 20px;">登出</span></el-menu-item>
      </el-sub-menu>
    </el-menu>
  </div>
</template>

<script setup lang="ts">
import Avatar from '@/components/base/profile/userAvatar/index.vue'
import router from '@/router';
import { authStore } from '@/stores/authStore';
import { userAuthProcessStore } from '@/stores/userAuthProcess';
import { onMounted, ref } from 'vue';
const handleSelect = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
  const logProcess = userAuthProcessStore();
  //登出
  if (key == '3-1') {
    logProcess.Logout().then().catch().finally(() => {
      router.replace("/login")
    });
  }
}
const avatarData = ref();
const $user = authStore().getUserInfo;
const $user_name = authStore().getUserInfo.userName;
//初始化加载数据
onMounted(async () => {
  //获取用户数据
  if ($user.id) {
    console.log($user.nickName)
    avatarData.value = {
      avatar_name: $user.nickName || '',
      avatar_width: '35'
    }
  }
});


</script>


<style scoped>
.flex-grow {
  flex-grow: 1;
}

:deep(.el-menu) {
  background-color: transparent;
  border-bottom: 0px !important;

}

:deep(.el-sub-menu__title) {
  line-height: 30px;
}

:deep(.el-sub-menu__icon-arrow) {
  display: none;
}

.mainMenuSubItemTitle {
  margin-left: 20px;
}
</style>
